<template>
  <div>
    <h1>Fabric</h1>
    <p>Coming soon...</p>
    <button @click="initPaint">paint</button>
    <ul>
      <li v-for="(item, index) in imgList" :key="index">
        <img :src="item.foreground" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
import Obs from 'ulearning-obs/dist/obs-huawei.js'
export default {
  name: 'Fabric',
  data () {
    return {
      
      imgList: [
        {
          // background: 'https://tobs.ulearning.cn/resources/web/202401291530059577.png',
          background: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          // foreground: require('src/assets/images/canvas.png'),
          foreground: 'https://tobs.ulearning.cn/resources/web/1707190366711769.png'
        },
        {
          background: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        }
      ]
    }
  },
  created () {
    window.demo = this
  },
  methods: {
    initPaint () {
      this.$fabricPaint({
        isScrollBarAlwaysShow: true,
        imgList: this.imgList,
        // isOnlyView: true,
        onDownload: () => {
          console.log('onDownload')
        },
        onSave: (index, dataURL) => {
          // console.log(index, dataURL)
          console.log('onsave')
          this.uploadFile(this.imgList[index], dataURL)
        },
        onClearMarks: () => {
          console.log('onClearMarks')
          // this.imgList.forEach(item => {
          //   item.foreground = ''
          // })
        },
      })
    },
    uploadFile (img, dataURL) {
      var obs = new Obs({
        authorization: '4B717D0CFBD6A17E1D188A0DD2773568'
      })
      let blob = obs.dataURLtoBlob(dataURL)
      blob.ext = '.png'
      console.log(blob)
      obs.startUpload(blob)
      blob.onSuccess = function () {
        img.foreground = blob.obsHost + '/' + blob.key
        console.log('success----file-----',blob)
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>